import { useReducer } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
import TaskReducer from './reducer/index'
import {AddedTask,DeleteTask,ChangeTask}from './action'


let nextId = 3;
const initialTasks = [
  {id: 0, text: '参观卡夫卡博物馆', done: true},
  {id: 1, text: '看木偶戏', done: false},
  {id: 2, text: '打卡列侬墙', done: false},
];


export default function TaskApp() {
  const [tasks, dispatch] = useReducer(TaskReducer,initialTasks);

  function handleAddTask(text) {
    dispatch(AddedTask(
      {
        id: nextId++,
        text: text,
        done: false,
      },
    ))
  }

  function handleChangeTask(task) {
    dispatch(ChangeTask({
      task
    }))
  }

  function handleDeleteTask(taskId) {
    dispatch(DeleteTask(
      taskId
    ))
  }

  return (
    <>
      <h1>布拉格的行程安排</h1>
      <AddTask onAddTask={handleAddTask} />
      <TaskList
        tasks={tasks}
        onChangeTask={handleChangeTask}
        onDeleteTask={handleDeleteTask}
      />
    </>
  );
}

